<template>
	<view class="content">
		<!-- 优惠 -->
		<view class="tanchuang-area" v-if="youhui">
			<view class="tanchuang-inside">
				<view class="tanchuang-tittle">优惠</view>
				<view class="youhui-tittle">优惠</view>
				<view class="youhui-tips">满减</view>
				<view class="youhui-text">每购买一份可得49MGT</view>
				<view class="youhui-tips">送U点</view>
				<view class="youhui-text">送10U点</view>
				<view class="tanchuang-botton" @tap="youhuiShow()">完成</view>
			</view>
		</view>

		<!-- 参数 -->
		<view class="tanchuang-area" v-if="canshu">
			<view class="tanchuang-inside">
				<view class="tanchuang-tittle">参数</view>
				<view class="canshu-items">
					<view class="canshu-name">品牌</view>
					<view class="canshu-info">其他</view>
				</view>
				<view class="canshu-items">
					<view class="canshu-name">产地</view>
					<view class="canshu-info">浙江</view>
				</view>
				<view class="canshu-items">
					<view class="canshu-name">保质期</view>
					<view class="canshu-info">16个月</view>
				</view>
				<view class="canshu-items">
					<view class="canshu-name">产品规格</view>
					<view class="canshu-info">1瓶装</view>
				</view>
				<view class="tanchuang-botton" @tap="canshuShow()">完成</view>
			</view>
		</view>

		<!-- 选择颜色分类尺码 -->
		<view class="tanchuang-area" v-if="chima">
			<view class="tanchuang-inside">
				<view class="chima-top">
					<image src="https://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/no_img.png" mode=""></image>
					<view class="chima-top-infos">
						<view class="chima-top-infos-price">￥200+100MGT</view>
						<view class="chima-top-infos-kucun">库存4024件</view>
						<view class="chima-top-infos-text">请选择 尺寸 颜色分类</view>
					</view>

					<view class="chima-color">
						<view class="chima-color-tittle">颜色</view>
						<view class="chima-color-items">
							<view class="chima-color-items-box " v-for="(item,index) in 6" :class="[index == colorIndex ? 'chimaactive' : '']"
							 @tap="colorChoice(index)">速暖双面绒-黄色</view>
						</view>
					</view>

					<view class="chima-color">
						<view class="chima-color-tittle">尺码</view>
						<view class="chima-color-items">
							<view class="chima-color-items-box" v-for="(size,index) in 2" :class="[index == sizeIndex ? 'chimaactive' : '']"
							 @tap="sizeChoice(index)">1.5米床单 被套2008230cm</view>
						</view>
					</view>

					<view class="chima-buynum">
						<view class="chima-buynum-tittle">购买数量</view>
						<view class="chima-buynum-xiangou">每人限购3件</view>
						<view class="chima-buynum-item">
							<view class="chima-buynum-item-button" :class="numbers == 1 ? 'chima-buynum-item-button-no' : ''" @tap="reduceNum()">-</view>
							<view class="chima-buynum-item-mid">{{numbers}}</view>
							<view class="chima-buynum-item-button" @tap="addNum()">+</view>
						</view>
					</view>
				</view>
				<view class="tanchuang-botton" @tap="chimaShow()">完成</view>
			</view>
		</view>

		<!-- 保障服务 -->
		<view class="tanchuang-area" v-if="baozhang">
			<view class="tanchuang-inside">
				<view class="tanchuang-tittle">保障服务</view>
				<view class="fuwu-items">
					<view class="fuwu-img">
						<image src="https://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/gou%402x.png" mode=""></image>
					</view>
					<view class="fuwu-info">
						<view class="fuwu-tittle">正品保证</view>
						<view class="fuwu-discribe">商品货源接受严格质量检测 </view>
					</view>
				</view>
				<view class="fuwu-items">
					<view class="fuwu-img">
						<image src="https://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/gou%402x.png" mode=""></image>
					</view>
					<view class="fuwu-info">
						<view class="fuwu-tittle">7天无忧退换货</view>
						<view class="fuwu-discribe">本商品适用国家《网络购买商品七日无理由退货暂行办法》 </view>
					</view>
				</view>
				<view class="fuwu-items">
					<view class="fuwu-img">
						<image src="https://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/gou%402x.png" mode=""></image>
					</view>
					<view class="fuwu-info">
						<view class="fuwu-tittle">极速退款</view>
						<view class="fuwu-discribe">退款自动化处理，方便快捷 </view>
					</view>
				</view>
				<view class="tanchuang-botton" @tap="baozhangShow()">完成</view>
			</view>
		</view>
		<view class="top_area">
			<image @tap="goBack()" class="img_left" src="https://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/back%402x.png" mode=""></image>
			<image class="img_right" @tap="shoucang_sub()" src="https://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/shoucang_no%402x.png"
			 v-if="shoucang"></image>
			<image class="img_right" @tap="shoucang_sub()" src="https://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/yishoucang%402x.png"
			 v-if="!shoucang"></image>
			<view class="tejia_area">
				<view class="tejia_l">
					<view class="tejia_l_t">
						￥200<span>限时特价</span>
					</view>
					<view class="tejia_l_b">
						市场指导价：<a style="text-decoration: line-through;">￥300</a>
					</view>
				</view>
				<view class="tejia_r">
					<view class="tejia_r_top">距离结束还剩</view>
					<view class="tejia_day">3天</view>
					<view class="tejia_time">21</view>:
					<view class="tejia_time">54</view>:
					<view class="tejia_time">38</view>
				</view>
			</view>
			<image class="img_back" src="https://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/no_img.png"></image>
		</view>
		
		
		
		<view class="good_info_area_out">
			<view class="good_info_area">
				<span>商品标签</span>
				MOUSSY新品圆领3D字母条纹袖臂拼接色宽松T恤衫女2019新款夏季商场同款
			</view>
		</view>
		
		
		
		<view class="price_area">
			<view class="price_real">￥899</view>
			<view class="price_nomal">市场指导价：<span style="text-decoration: line-through;">1299</span></view>
		</view>
		<view class="youhui_area">
			<view class="youhui_left">U点优惠</view>
			<view class="youhui_right">用MGT抵扣预计可<a style="color: #FE4338">省¥50.89</a></view>
		</view>
		<view class="youhui_area " style="display: block;">
			<view class="yunfei_left yunfei_item">运费：￥6</view>
			<view class="yunfei_right yunfei_item">满199元包邮</view>
		</view>

		<view class="good_parameter_area">
			<view class="good_paramter_item good_parameter_border" @tap="youhuiShow()">
				<view class="good_paramter_left">优惠</view>
				<view class="good_paramter_mid"><span>满减</span>满300减20</view>
				<view class="good_paramter_right">
				</view>
			</view>
			<view class="good_paramter_item good_parameter_border" @tap="canshuShow()">
				<view class="good_paramter_left">参数</view>
				<view class="good_paramter_mid">品牌 产地 规格 </view>
				<view class="good_paramter_right">
				</view>
			</view>
			<view class="good_paramter_item good_parameter_border" @tap="chimaShow()">
				<view class="good_paramter_left">选择</view>
				<view class="good_paramter_mid">请选择颜色分类/尺码</view>
				<view class="good_paramter_right">
				</view>
			</view>
			<view class="good_paramter_item" @tap="baozhangShow()">
				<view class="good_paramter_left">服务</view>
				<view class="good_paramter_mid" style="display: flex;">
					<view>
						<image src="https://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/gou%402x.png"></image>正品保证
					</view>
					<view>
						<image src="https://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/gou%402x.png"></image>7天无忧退换货
					</view>
					<view>
						<image src="https://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/gou%402x.png"></image>极速退款
					</view>
				</view>
				<view class="good_paramter_right">
				</view>
			</view>
		</view>

		<view class="pingjia_area">
			<view class="pingjia_tittle">
				<view class="pingjia_tittle_left">商品评价(13)</view>
				<view class="pingjia_tittle_right">查看全部</view>
			</view>
			<view class="pingjia_user_info">
				<view></view>
				j***za
			</view>
			<view class="pingjia_text">
				衣服穿着很显气质，颜色很特别显着皮肤干净，看着就很大气，毛领特别好均匀而且长，刚收到就迫不及待的穿上试试
			</view>
		</view>

		<view class="banner_shop_area">
			<view class="banner_left">
				<image src="https://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/Group%402x.png"></image>
			</view>
			<view class="banner_right">进入品牌</view>
			<view class="banner_mid">
				<view class="banner_mid_name">OLAY</view>
				<view class="banner_mid_selling">在售商品3件</view>
			</view>
		</view>
		<view class="detail_line_out">
			<view class="detail_line">
				<view></view>
				商品详情
				<view></view>
			</view>
		</view>

		<view class="detail_area">
			<view style="height: 100px;"></view>
		</view>

		<view class="buy_area">
			<view class="buy_item">
				<image src="https://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/kefu_b%402x.png"></image>
				<view>客服</view>
			</view>
			<view class="buy_item">
				<image src="https://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/caigou-xianxing%402x.png"></image>
				<view>购物车</view>
			</view>
			<view class="buy_right">
				<view class="buy_buttom buy_l">加入购物车</view>
				<view class="buy_buttom buy_r">买就赚120.00元</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				shoucang: true,
				youhui: false,
				canshu: false,
				baozhang: false,
				chima: false,
				numbers: 1,
				colorIndex: 0,
				sizeIndex: 0
			}
		},
		onLoad() {

		},
		methods: {
			goBack() {
				uni.navigateBack({ //uni.navigateTo跳转的返回，默认1为返回上一级
					delta: 1
				})
			},
			shoucang_sub() {
				this.shoucang = !this.shoucang
				if (this.shoucang == false) {
					console.log('收藏')
				} else {
					console.log('取消收藏')
				}
			},
			youhuiShow() {
				this.youhui = !this.youhui
			},
			canshuShow() {
				this.canshu = !this.canshu
			},
			baozhangShow() {
				this.baozhang = !this.baozhang
			},
			chimaShow() {
				this.chima = !this.chima
			},
			sizeChoice(index) {
				this.sizeIndex = index
				console.log(this.sizeIndex)
			},
			colorChoice(index) {
				this.colorIndex = index
				console.log(this.colorIndex)
			},
			addNum() {
				this.numbers += 1
			},
			reduceNum() {
				if (this.numbers > 1) {
					this.numbers -= 1
				}
			}
		}
	}
</script>

<style>
	page {
		background: rgba(245, 245, 245, 1);
	}

	.content {
		width: 100%;
		height: 100%;
		padding-bottom: 10px;
	}

	.top_area {
		width: 100%;
		height: 375px;
		position: relative;
	}

	.img_left {
		width: 30px;
		height: 30px;
		z-index: 10;
		position: absolute;
		top: 10px;
		left: 10px;
	}

	.img_right {
		width: 30px;
		height: 30px;
		z-index: 10;
		position: absolute;
		right: 10px;
		top: 10px;
	}

	.img_back {
		width: 100%;
		height: 375px;
		z-index: 5;
		position: absolute;
	}

	.good_info_area_out {
		background-color: #FFF;
		width: 100%;
		height: 57px;
		position: relative;
	}

	.good_info_area {
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		line-height: 20px;
		position: absolute;
		top: 6.5px;
		right: 11px;
		bottom: 6.5px;
		left: 12px;
	}

	.good_info_area span {
		padding: 0 5.5px;
		margin-right: 7px;
		height: 16px;
		background: rgba(254, 67, 56, 1);
		border-radius: 8px;
		font-size: 11px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		line-height: 16px;
		text-align: center;
	}

	.price_area {
		width: 100%;
		height: 38px;
		display: flex;
		background-color: #FFF;
	}

	.price_real {
		height: 31px;
		font-size: 22px;
		font-family: PingFangSC-Medium, PingFangSC;
		font-weight: 500;
		color: rgba(254, 67, 56, 1);
		line-height: 31px;
		padding-left: 12px;
		padding-right: 6px;
	}

	.price_nomal {
		height: 31px;
		font-size: 13px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		line-height: 31px;
	}

	.youhui_area {
		width: 100%;
		height: 46px;
		background-color: #FFF;
		display: flex;
	}

	.youhui_left {
		width: 58px;
		height: 38px;
		background: linear-gradient(270deg, rgba(255, 76, 76, 1) 0%, rgba(255, 99, 54, 1) 100%);
		border-radius: 4px 0px 0px 4px;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		line-height: 38px;
		text-align: center;
		margin-left: 12px;
	}

	.youhui_right {
		width: 75%;
		height: 38px;
		background: rgba(245, 245, 245, 1);
		border-radius: 0 4px 4px 0;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		line-height: 38px;
		padding-left: 12px;
		display: flex;
	}

	.yunfei_item {
		height: 46px;
		position: relative;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		line-height: 46px;
	}

	.yunfei_left {
		float: left;
		left: 12px;
	}

	.yunfei_right {
		float: right;
		right: 12px;
	}

	.good_parameter_area {
		width: 100%;
		height: 180px;
		margin-top: 10px;
		background-color: #FFF;
	}

	.good_paramter_item {
		margin-left: 12px;
		height: 45px;
		display: flex;
		flex-wrap: wrap;
	}

	.good_parameter_border {
		border-bottom: #E5E5E5 1px solid;
	}

	.good_paramter_left {
		padding-right: 19px;
		height: 45px;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		line-height: 45px;
	}

	.good_paramter_mid {
		height: 45px;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		line-height: 45px;
	}

	.good_paramter_mid span {
		height: 12px;
		background: rgba(255, 255, 255, 1);
		border: 1px solid rgba(254, 67, 56, 1);
		padding: 0 7px;
		text-align: center;
		font-size: 9px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(254, 67, 56, 1);
		line-height: 12px;
		border-radius: 12px;
		margin-right: 8.5px;
	}

	.good_paramter_mid image {
		width: 10px;
		height: 10px;
		margin-right: 5px;
	}

	.good_paramter_mid view {
		margin-right: 15px;
	}

	.pingjia_area {
		width: 100%;
		height: 125px;
		margin-top: 10px;
		background-color: #FFF;
	}

	.pingjia_tittle {
		width: 94.3%;
		height: 38.5px;
		position: relative;
	}

	.pingjia_tittle_left {
		float: left;
		margin-left: 12px;
		font-size: 12px;
		font-family: PingFangSC-Medium, PingFangSC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		line-height: 38.5px;
	}

	.pingjia_tittle_right {
		float: right;
		right: 12px;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		line-height: 38.5px;
	}

	.pingjia_user_info {
		width: 100%;
		height: 24px;
		display: flex;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		line-height: 24px;
	}

	.pingjia_user_info view {
		width: 24px;
		height: 24px;
		border-radius: 12px;
		background: rgba(255, 234, 233, 1);
		margin: 0 10px;
	}


	.pingjia_text {
		height: 38px;
		margin: 12px;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		line-height: 18px;
	}

	.banner_shop_area {
		margin-top: 10px;
		width: 100%;
		height: 60px;
		background-color: #FFF;
		position: absolute;
	}

	.banner_left {
		width: 40px;
		height: 40px;
		margin: 12px;
		float: left;
	}

	.banner_left image {
		width: 40px;
		height: 40px;
	}

	.banner_mid {
		height: 60px;
	}

	.banner_mid_name {
		height: 20px;
		padding-top: 12px;
		font-size: 14px;
		font-family: PingFangSC-Medium, PingFangSC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		line-height: 20px;
	}

	.banner_mid_selling {
		width: 100%;
		height: 15px;
		margin-top: 3px;
		font-size: 11px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		line-height: 15px;
	}

	.banner_right {
		height: 60px;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(254, 67, 56, 1);
		line-height: 60px;
		float: right;
		margin-right: 10px;
	}

	.detail_line_out {
		width: 100%;
		height: 35px;
	}

	.detail_line {
		width: 200px;
		height: 35px;
		font-size: 11px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		line-height: 35px;
		display: flex;
		margin: 0 auto;
		margin-top: 70px;

	}

	.detail_line view {
		width: 50px;
		height: 1px;
		color: #DDDDDD;
		margin: 18px 12px;
	}

	.detail_area {
		width: 100%;
		height: 100%;
		background-color: #FFF;
		margin-bottom: 60px;
	}

	.buy_area {
		width: 100%;
		height: 55px;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px -2px 7px 0px rgba(153, 153, 153, 0.2);
		display: flex;
		flex-wrap: wrap;
		position: fixed;
		bottom: 0;
	}

	.buy_item {
		width: 40px;
		height: 40px;
		text-align: center;
		margin-left: 18px;
		margin-top: 10px;
	}

	.buy_item image {
		width: 21px;
		height: 21px;

	}

	.buy_item view {
		width: 40px;
		height: 15px;
		font-size: 9px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		line-height: 10px;
	}

	.buy_buttom {
		width: 115px;
		height: 42px;
		font-size: 14px;
		font-family: PingFangSC-Medium, PingFangSC;
		font-weight: 500;
		line-height: 42px;
		margin-top: 7px;
		text-align: center;
		color: rgba(255, 255, 255, 1);
	}

	.buy_l {
		background: rgba(26, 25, 30, 1);
	}

	.buy_r {
		background: linear-gradient(90deg, rgba(253, 5, 82, 1) 0%, rgba(255, 77, 3, 1) 100%);
	}

	.buy_right {
		display: flex;
		position: absolute;
		right: 10px;
	}

	.tejia_area {
		width: 100%;
		height: 50px;
		position: absolute;
		bottom: 0;
		z-index: 15;
		display: flex;
	}

	.tejia_l {
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, rgba(253, 5, 82, 1) 0%, rgba(255, 77, 3, 1) 100%);
	}

	.tejia_l_t {
		margin-top: 3px;
		margin-left: 5px;
		height: 24px;
		font-size: 22px;
		font-family: PingFangSC-Medium, PingFangSC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		bottom: 0;

	}

	.tejia_l_t span {
		font-size: 11px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		padding-left: 5px;
	}

	.tejia_l_b {
		margin-top: 2.5px;
		margin-left: 7.5px;
		height: 15px;
		font-size: 11px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		line-height: 15px;
		display: flex;
		flex-wrap: wrap;
	}

	.tejia_r {
		width: 103px;
		height: 100%;
		background: rgba(255, 234, 233, 1);
		position: absolute;
		right: 0;
		display: flex;
		flex-wrap: wrap;
		font-size: 13px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(253, 26, 58, 1);
		line-height: 18px;
	}

	.tejia_r_top {
		height: 25px;
		width: 100%;
		text-align: center;
		font-size: 10px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(254, 28, 58, 1);
		line-height: 25px;
	}

	.tejia_day {
		width: 27.5px;
		height: 25.5px;
		text-align: right;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(253, 26, 58, 1);
		line-height: 18px;
	}

	.tejia_time {
		width: 18px;
		height: 18px;
		background: rgba(253, 26, 58, 1);
		line-height: 18px;
		border-radius: 4px;
		text-align: center;
		font-size: 11px;
		font-family: PingFangSC-Medium, PingFangSC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		margin: 0 1px;
	}

	.tanchuang-area {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		z-index: 100;
	}

	.tanchuang-inside {
		width: 100%;
		height: 500px;
		background: rgba(255, 255, 255, 1);
		position: absolute;
		bottom: 0px;
		border-radius: 10px 10px 0px 0px;
	}

	.tanchuang-tittle {
		width: 100%;
		height: 52px;
		text-align: center;
		font-size: 15px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		line-height: 52px;
	}

	.youhui-tittle {
		padding-left: 16.5px;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		line-height: 16.5px;
	}

	.youhui-tips {
		width: 39px;
		height: 12px;
		border-radius: 6px;
		text-align: center;
		font-size: 9px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(254, 67, 56, 1);
		border: 1px solid rgba(254, 67, 56, 1);
		margin-left: 16.5px;
		margin-top: 15px;
	}

	.youhui-text {
		height: 16.5px;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		line-height: 16.5px;
		margin-left: 16.5px;
		margin-top: 5px;
	}

	.tanchuang-botton {
		width: 94%;
		height: 36px;
		background: rgba(254, 67, 56, 1);
		border-radius: 53px;
		margin-left: 3%;
		text-align: center;
		font-size: 15px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		line-height: 36px;
		position: absolute;
		bottom: 19px;
	}

	.canshu-items {
		width: 96%;
		height: 40px;
		margin-left: 4%;
		border-bottom: #EEEEEE solid 1px;
		display: flex;
	}

	.canshu-name {
		width: 82px;
		height: 40px;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		line-height: 40px;
	}

	.canshu-info {
		height: 40px;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		line-height: 40px;
	}

	.fuwu-items {
		width: 96%;
		height: 58px;
		margin-left: 4%;
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 10px;
	}

	.fuwu-img {
		width: 15px;
		height: 100%;
	}

	.fuwu-img image {
		width: 10px;
		height: 10px;
	}

	.fuwu-info {
		height: 58px;
	}

	.fuwu-tittle {
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		line-height: 29px;
	}

	.fuwu-discribe {
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
		line-height: 20px;
	}

	.chima-top {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}

	.chima-top image {
		width: 90px;
		height: 90px;
		margin: 12px;
	}

	.chima-top-infos {
		height: 100%;
		width: 260px;
	}

	.chima-top-infos-price {
		height: 18px;
		font-size: 14px;
		font-family: PingFangSC-Medium, PingFangSC;
		font-weight: 500;
		color: rgba(255, 97, 14, 1);
		line-height: 18px;
		margin-top: 47px;
	}

	.chima-top-infos-kucun {
		margin-top: 3.5px;
		height: 15px;
		font-size: 11px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		line-height: 15px;
	}

	.chima-top-infos-text {
		height: 16.5px;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		line-height: 16.5px;
		margin-top: 2px;
	}

	.chima-color {
		width: 100%;
		height: 100%;

	}

	.chima-color-tittle {
		height: 16.5px;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		line-height: 16.5px;
		margin: 8.5px 0 12px 12px;
	}

	.chima-color-items {
		width: 250px;
		margin-left: 12px;
		height: 100%;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
	}

	.chima-color-items-box {
		margin-right: 13px;
		padding: 0 9px 0 9px;
		margin-bottom: 9px;
		height: 25px;
		background: rgba(246, 246, 246, 1);
		border-radius: 3px;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		line-height: 25px;
	}

	.chimaactive {
		padding: 0 8px 0 8px;
		height: 23px;
		line-height: 23px;
		background: rgba(255, 237, 237, 1);
		border: 1px solid rgba(254, 67, 56, 1);
		color: rgba(254, 67, 56, 1);
	}

	.chima-buynum {
		width: 100%;
		height: 30px;
		display: flex;
		flex-wrap: wrap;
	}

	.chima-buynum-tittle {
		width: 50px;
		height: 30px;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		line-height: 30px;
		margin: 0 6px 0 12px;
	}

	.chima-buynum-xiangou {
		width: 70px;
		height: 30px;
		line-height: 30px;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
	}

	.chima-buynum-item {
		position: absolute;
		right: 15px;
		width: 98px;
		height: 30px;
		display: flex;
		flex-wrap: wrap;
	}
	
	.chima-buynum-item-button {
		width: 30px;
		height: 30px;
		background: rgba(249, 250, 249, 1);
		text-align: center;
		margin-top: 2px;
	}
	
	.chima-buynum-item-button-no {
		color: #D8D8D8;
	}

	.chima-buynum-item-mid {
		width: 34px;
		height: 30px;
		margin: 0 2px;
		background: rgba(249, 250, 249, 1);
		text-align: center;
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		line-height: 30px;
	}
</style>
